<template>
  <div class="contact-box" ref="contactBoxRef">
    <ContactTitle
      pageType="contact"
      @setTableH="setTableH"
      @calculateTable="calculateTable"
      @sceneTypeSearch="sceneTypeSearch"
      @threeSearch="threeSearch"
      @customerSearch="customerSearch"
      @init="ordinaryOrAdvancedRequest"
      @exportValue="exportValue"
      :exportLoading="exportLoading"
    />
    <ContactTable
      ref="crmTableRef"
      pageType="contact"
      :list="list"
      :loading="loading"
      :meterHeaderList="meterHeaderList"
      :total="total"
      :pageNo="queryParams.pageNo"
      :pageSize="queryParams.pageSize"
      :domHeight="domHeight"
      @pageNextProver="pageNextProver"
      :setTimes="setTimes"
      @ordinaryOrAdvancedRequest="ordinaryOrAdvancedRequest"
      @handleDefault="handleDefault"
      @saveTableSort="saveTableSort"
      @sortChange="sortChange"
    />
  </div>
</template>
<script setup>
import * as TableSort from '@/utils/sortTable'
import * as AdvancedQueryApi from '@/api/crm/advancedQuery/index.ts'
import * as ContactApi from '@/api/crm/contact'
import ContactTitle from '@/views/crm/components/CrmTitle/index2.vue'
import ContactTable from '@/views/crm/components/CrmTable/index2.vue'
import download from '@/utils/download'

defineOptions({ name: 'CrmContact' })

const message = useMessage()
const loading = ref(false)
const list = ref([])
const total = ref(0)
const setTimes = ref({})
const meterHeaderList = ref()
const contactBoxRef = ref(null)
const domHeight = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  moduleId: '',
  customerId: '',
  sceneType: '',
  sortStr: '',
  name: null,
  telephone: null,
  mobile: null,
  sortFields: {}
})
const crmTableRef = ref(null)
const paramsValue = ref({})
/**设置表格的高度*/
const setTableH = (val) => {
  crmTableRef.value?.setTableHeight(val)
}
const oldHeight = ref(0)
/**拿到title高度计算表格的高度*/
const calculateTable = (val) => {
  oldHeight.value = domHeight.value - val
  setTableH(domHeight.value - val)
}
/**分页*/
const pageNextProver = (val) => {
  const { page, limit } = val
  queryParams.pageNo = page
  queryParams.pageSize = limit
  getContactList()
}
/**负责的请求*/
const sceneTypeSearch = (val) => {
  queryParams.sceneType = val
  queryParams.pageNo = 1
  ordinaryOrAdvancedRequest()
}
const customerSearch = (val) => {
  queryParams.pageNo = 1
  queryParams.customerId = val
  ordinaryOrAdvancedRequest()
}
const checkStringType = (str) => {
  // 正则表达式
  const nameReg = /^[\u4e00-\u9fa5a-zA-Z\s\.]+$/
  const phoneReg = /^1[3-9]\d{9}$/
  const telReg = /^\d{3,4}-\d{7,8}$/

  if (nameReg.test(str)) {
    return 0
  } else if (phoneReg.test(str)) {
    return 1
  } else if (telReg.test(str)) {
    return 1
  } else {
    return 0
  }
}
const typeMap = {
  0: 'name',
  1: 'mobile',
  2: 'telephone'
}
// 三和一的筛选
const threeSearch = (val) => {
  queryParams.name = null
  queryParams.telephone = null
  queryParams.mobile = null
  if (val) {
    queryParams[typeMap[checkStringType(val)]] = val
  }
  queryParams.pageNo = 1
  ordinaryOrAdvancedRequest()
}
/**普通搜索线索列表**/
const getContactList = async () => {
  let data
  if (Object.keys(queryParams.sortFields).length > 0) {
    queryParams.sortStr = JSON.stringify(queryParams.sortFields)
  }
  try {
    loading.value = true
    data = await ContactApi.getContactPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// 普通请求
const ordinaryOrAdvancedRequest = () => {
  getContactList()
}
/**表头 + 自定义字段表头*/
const getFiledList = async () => {
  const tableSort = TableSort.getMeterList(TableSort.DICT.CONTACT)
  meterHeaderList.value = [...tableSort].reduce((acc, current) => {
    if (!acc.find((item) => item.label === current.label)) {
      acc.push(current)
    }
    return acc
  }, [])
}
/** 恢复默认 */
const handleDefault = () => {
  getFiledList()
}
/**排序*/
const sortChange = (key, val) => {
  queryParams.sortFields[key] = val
  ordinaryOrAdvancedRequest()
}
/** 保存table配置 */
const saveTableSort = () => {
  TableSort.setMeterList(TableSort.DICT.CONTACT, meterHeaderList.value)
}
onMounted(() => {
  domHeight.value = contactBoxRef.value.offsetHeight - 160
  getContactList()
  getFiledList()
})
const exportLoading = ref(false)
/**导出数据*/
const exportValue = async () => {
  try {
    await message.exportConfirm()
    exportLoading.value = true
    const data = await ContactApi.exportContact(queryParams)
    download.excel(data, '联系人.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.contact-box {
  width: 100%;
  flex-grow: 1;
}
</style>
